<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mua - 大姨妈记录</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 大姨妈记录界面 -->
        <div class="screen">
            <div class="screen-title">大姨妈记录</div>
            <div class="period-screen">
                <!-- 大姨妈日历 -->
                <div class="period-month">
                    <div class="period-header">
                        <i class="fas fa-chevron-left"></i>
                        <h3>2023年6月</h3>
                        <i class="fas fa-chevron-right"></i>
                    </div>
                    <div class="period-week">
                        <div>日</div>
                        <div>一</div>
                        <div>二</div>
                        <div>三</div>
                        <div>四</div>
                        <div>五</div>
                        <div>六</div>
                    </div>
                    <div class="period-days">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div>1</div>
                        <div>2</div>
                        <div class="period-day period">3</div>
                        <div class="period-day period">4</div>
                        <div class="period-day period">5</div>
                        <div class="period-day period">6</div>
                        <div class="period-day period">7</div>
                        <div>8</div>
                        <div>9</div>
                        <div>10</div>
                        <div>11</div>
                        <div>12</div>
                        <div>13</div>
                        <div>14</div>
                        <div>15</div>
                        <div>16</div>
                        <div>17</div>
                        <div>18</div>
                        <div>19</div>
                        <div>20</div>
                        <div>21</div>
                        <div>22</div>
                        <div>23</div>
                        <div>24</div>
                        <div>25</div>
                        <div>26</div>
                        <div>27</div>
                        <div>28</div>
                        <div>29</div>
                        <div>30</div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
                
                <!-- 大姨妈统计信息 -->
                <div class="period-info-cards">
                    <div class="period-info-card">
                        <div class="period-info-icon">
                            <i class="fas fa-calendar-day"></i>
                        </div>
                        <div class="period-info-data">
                            <div class="period-info-value">7月3日</div>
                            <div class="period-info-label">预计下次日期</div>
                        </div>
                    </div>
                    <div class="period-info-card">
                        <div class="period-info-icon">
                            <i class="fas fa-hourglass-half"></i>
                        </div>
                        <div class="period-info-data">
                            <div class="period-info-value">5天</div>
                            <div class="period-info-label">平均持续天数</div>
                        </div>
                    </div>
                    <div class="period-info-card">
                        <div class="period-info-icon">
                            <i class="fas fa-sync-alt"></i>
                        </div>
                        <div class="period-info-data">
                            <div class="period-info-value">28天</div>
                            <div class="period-info-label">平均周期</div>
                        </div>
                    </div>
                </div>
                
                <!-- 大姨妈提醒卡片 -->
                <div class="period-reminder-card">
                    <div class="period-reminder-title">
                        <i class="fas fa-bell"></i>
                        <span>大姨妈提醒</span>
                    </div>
                    <div class="period-reminder-content">
                        <p>预计还有3天大姨妈来临，记得准备好卫生巾哦~</p>
                    </div>
                    <div class="period-reminder-items">
                        <div class="period-reminder-item">
                            <i class="fas fa-pills"></i>
                            <span>备好止痛药</span>
                        </div>
                        <div class="period-reminder-item">
                            <i class="fas fa-tint"></i>
                            <span>多喝热水</span>
                        </div>
                        <div class="period-reminder-item">
                            <i class="fas fa-ban"></i>
                            <span>避免冰凉食物</span>
                        </div>
                    </div>
                </div>
                
                <div class="bottom-nav">
                    <div class="nav-item" data-page="dashboard.html">
                        <i class="fas fa-home"></i>
                        <span>主页</span>
                    </div>
                    <div class="nav-item active" data-page="period.html">
                        <i class="fas fa-moon"></i>
                        <span>大姨妈</span>
                    </div>
                    <div class="nav-item" data-page="location.html">
                        <i class="fas fa-map-marked-alt"></i>
                        <span>位置</span>
                    </div>
                    <div class="nav-item" data-page="settings.html">
                        <i class="fas fa-cog"></i>
                        <span>设置</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="script.js"></script>
    <script>
        // 导航栏跳转
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function() {
                const page = this.getAttribute('data-page');
                if (page) {
                    window.location.href = page;
                }
            });
        });
        
        // 日期点击事件
        document.querySelectorAll('.period-days div:not(:empty)').forEach(day => {
            day.addEventListener('click', function() {
                // 切换大姨妈状态
                if (this.classList.contains('period')) {
                    this.classList.remove('period');
                } else {
                    this.classList.add('period');
                }
            });
        });
    </script>
</body>
</html> 